/*初始化代码*/
body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fff;
  color: #333;
  font-size: 12px;
}

ul,
ol {
  list-style-type: none;
}

select,
input,
img,
select {
  vertical-align: middle;
}

a {
  text-decoration: none;
}

a:link {
  color: #009;
}

a:visited {
  color: #800080;
}

// a:hover,
// a:active,
// a:focus {
//   // color: #c00;
//   // text-decoration: none;
// }
div {
  box-sizing: border-box;

  // overflow: overlay;
}

img {
  position: relative;
}

/* svg使用*/
//<svg aria-hidden="true">
//    <use xlink:href="#svg-qiyeweixin"></use>
//</svg>
//
//
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentcolor;
  overflow: hidden;
}

// img:after {
//     content: ' ';
//     display: block;
//     position: absolute;
//     z-index: 0;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     background: url('../image/time.jpg');
//     background-size: 100% 100%;
// }
/**超出省略*/
.over-none {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*不换行*/
.text-nowrap {
  white-space: nowrap;
}

/*视图通用*/
.page-main {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/*阻止文本选择*/
.text-none {
  -webkit-user-select: none;
  /*webkit浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

/*hover方大*/
.magnify-img {
  cursor: pointer;
  transition: all 0.4s;

  &:hover {
    transform: scale(1.4);
  }
}

/*弹性盒子*/
.flex-box {
  transition: all 0.2s;
  display: flex;

  &.l-c-c {
    justify-content: center;
    align-items: center;
  }

  &.l-c-a {
    justify-content: space-around;
    align-items: center;
  }

  &.l-s-c {
    justify-content: center;
    align-items: flex-start;
  }

  &.l-c-b {
    justify-content: space-between;
    align-items: center;
  }

  &.l-c-s {
    justify-content: flex-start;
    align-items: center;
  }

  &.l-e-s {
    justify-content: flex-start;
    align-items: flex-end;
  }

  &.l-c-e {
    justify-content: flex-end;
    align-items: center;
  }

  &.l-s-s {
    justify-content: flex-start;
    align-items: flex-start;
  }

  &.c-c-b {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  &.c-b-s {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  &.c-c-c {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  &.c-s-c {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  &.c-e-c {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  &.c-s-s {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  &.c-a-s {
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
  }

  &.c-a-c {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  &.c-b-c {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}

/*按钮属性样式*/
.btn-box {
  cursor: pointer;
  transition: all 0.4s;

  &:hover {
    opacity: 0.7;
  }
}

/* 保存按钮 */
.save-btn {
  background-color: #00c155;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  color: #fff;
}

/*编辑*/
.edit-btn {
  background-color: #00c155;
}

/**删除*/
.del-btn {
  background-color: red;
}

/**普通*/
.submit-btn {
  background-color: #2456ed !important;
}

/**不可选中*/
.no-selected {
  user-select: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/*普通交互：连接，跳转*/
.a-hover {
  transition: all 0.4s;
  cursor: pointer;

  &:hover {
    color: red !important;
  }
}

/*输入框边框圆角*/
.input_radius {
  border-radius: 8px;
}

/*失败图片展示*/
.error-img {
  width: 100%;
  height: 100%;
  border: 2px dashed #9a9a9a;

  i {
    font-size: 20px;
  }
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vh;
}

.scrollbar-container {

  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 5px;
    transition: opacity 0.3s;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px transparent;
    background: transparent;
    transition: background-color 0.3s linear;
  }

  &::-webkit-scrollbar-track {
    background: transparent; // 滚动条轨道的背景色
  }

  &:hover {

    &::-webkit-scrollbar-thumb {
      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #dddee0;
    }

    // &::-webkit-scrollbar-track {/
    // background: #f1f1f1; // 滚动条轨道的背景色
    // }
  }
}

.app_container {
  background: #f5f5f5;
  height: 100%;
  font-size: 16px;
  padding: 10px;
}


@for $i from 5 through 20 {
  .p-#{$i} {
    padding: $i * 1px;
  }

  .pt-#{$i} {
    padding-top: $i * 1px;
  }

  .pb-#{$i} {
    padding-bottom: $i * 1px;
  }

  .pl-#{$i} {
    padding-left: $i * 1px;
  }

  .pr-#{$i} {
    padding-right: $i * 1px;
  }
}


.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-none {
  float: none;
}